<template>
  <view class="step_box">
    <uni-section title="服务对象" type="line" v-for="(item, index) in formList" :key="index">
      <form>
        <view v-if="flag">
          <!-- 建筑物(场所)名称 -->
          <view class="formItem">
            <view class="label ">建筑物(场所)名称</view>
            <input class="content" v-model="item.name" placeholder="请输入建筑物(场所)名称"
              @blur="labelLength('建筑物(场所)名称', item.name, true, 64)" />
          </view>

          <!-- 建筑物(场所)类别 -->
          <view class="formItem">
            <view class="label ">建筑物(场所)类别</view>
            <picker mode="selector" class="content" :range="placeType" range-key="dictLabel"
              @change="placeTypeChange($event, index)">
              <view :style="{ color: item.showPlace ? '#333' : '#999' }">{{ item.showPlace ||
                '请选择建筑物(场所)类别' }}</view>
            </picker>
          </view>

          <!-- 最高火灾危险性 -->
          <view class="formItem" v-if="item.showPlace !== '民用' && item.showPlace !== ''">
            <view class="label ">最高火灾危险性</view>
            <picker mode="selector" class="content" :range="dangerType" range-key="text"
              @change="dangerTypeChange($event, index)">
              <view :style="{ color: item.maxFireRisk ? '#333' : '#999' }">{{ item.maxFireRisk || '请选择最高火灾危险性' }}</view>
            </picker>
          </view>

          <!-- 地上层数 -->
          <view class="formItem" v-if="item.showPlace === '民用' || item.showPlace === '工业(厂房、仓库)'">
            <view class="label ">地上层数</view>
            <input class="content" v-model="item.upLayer" type="number" placeholder="请输入地上层数" />
          </view>

          <!-- 地下层数 -->
          <view class="formItem" v-if="item.showPlace === '民用' || item.showPlace === '工业(厂房、仓库)'">
            <view class="label ">地下层数</view>
            <input class="content" v-model="item.lowLayer" type="number" placeholder="请输入地下层数" />
          </view>

          <!-- 技术服务活动所在建筑面积(㎡) -->
          <view class="formItem" v-if="item.showPlace === '民用' || item.showPlace === '工业(厂房、仓库)'">
            <view class="label ">技术服务活动所在建筑面积(㎡)</view>
            <input class="content" v-model="item.areaSize" placeholder="请输入建筑面积"
              @blur="labelLength('技术服务活动所在建筑面积(㎡)', item.areaSize, true, 64)" />
          </view>

          <!-- 维保(检测)楼层或部位 -->
          <view class="formItem" v-if="item.showPlace === '民用' || item.showPlace === '工业(厂房、仓库)'">
            <view class="label ">维保(检测)楼层或部位</view>
            <input class="content" v-model="item.detectionFloor" placeholder="请输入楼层或部位"
              @blur="labelLength('维保(检测)楼层或部位', item.detectionFloor, true, 64)" />
          </view>

          <!-- 消防技术服务活动面积(㎡) -->
          <view class="formItem" v-if="item.showPlace === '民用' || item.showPlace === '工业(厂房、仓库)'">
            <view class="label ">消防技术服务活动面积(㎡)</view>
            <input class="content" v-model="item.totalSize" placeholder="请输入活动面积"
              @blur="labelLength('消防技术服务活动面积(㎡)', item.totalSize, true, 64)" />
          </view>
        </view>

        <view v-else>
          <!-- 评估(咨询)对象名称 -->
          <view class="formItem">
            <view class="label required">评估(咨询)对象名称</view>
            <input class="content" v-model="item.evaluationObjectName" placeholder="请输入评估(咨询)对象名称"
              @blur="labelLength('评估(咨询)对象名称', item.evaluationObjectName, true, 64)" />
          </view>

          <!-- 评估(咨询)对象描述 -->
          <view class="formItem">
            <view class="label required">评估(咨询)对象描述</view>
            <input class="content" v-model="item.evaluationObjectDescribe" placeholder="请输入评估(咨询)对象描述"
              @blur="labelLength('评估(咨询)对象描述', item.evaluationObjectDescribe, true, 64)" />
          </view>
        </view>
      </form>
      <view class="close" @tap.stop="delImg(index)" :data-index="index"><text class="cuIcon-close"
          style="color:red"></text></view>
    </uni-section>

    <view class="step_box_add" @click="changeAdd">
      <view class="step_box_add-img">
        <image :src="baseImgUrl + '/manage/add_copy.png'" mode=""></image>
      </view>
      <view class="step_box_add-span">
        新增租赁场地信息
      </view>
    </view>

    <view class="step_box-btn">
      <view class="flexwork" @click="back">
        上一步
      </view>
      <view class="flexwork" @click="next">
        下一步
      </view>
    </view>
    <toast></toast>
  </view>
</template>

<script>
import { baseImgUrl } from '@/config.js';
import { mapState } from 'vuex'
export default {
  data() {
    return {
      flag: false,
      baseImgUrl: baseImgUrl,
      // 建筑物(场所)类别列表
      placeType: [],
      // 最高火灾危险性
      dangerType: [
        {
          value: '甲',
          text: '甲'
        },
        {
          value: '乙',
          text: '乙'
        },
        {
          value: '丙',
          text: '丙'
        },
        {
          value: '丁',
          text: '丁'
        },
        {
          value: '戊',
          text: '戊'
        }
      ],

      // 建筑物(场所)类别回显
      showPlace: '',
      // 表单列表数据信息
      formList: [],

      // 校验表单数据
      valiFormData: {
        name: '', // 建筑物(场所)名称
        type: '', // 建筑物(场所)类别
        maxFireRisk: '', // 最高火灾危险性
        upLayer: "", // 地上层数
        lowLayer: "", // 地下层数
        areaSize: "", // 技术服务活动所在建筑面积
        detectionFloor: "", // 维保(检测)楼层或部位
        totalSize: "", // 消防技术服务活动面积(㎡)
        showPlace: '', // 建筑物(场所)类别回显
        evaluationObjectDescribe: '', // 评估(咨询)对象描述
        evaluationObjectName: '', // 评估(咨询)对象名称
      },
    }
  },
  computed: {
    ...mapState(['task']),
  },
  created() {
    if (this.task.firstObj.serviceType == '1') {
      this.flag = true
    } else {
      this.flag = false
    }
    console.log(this.flag)
    new Promise((resolve, reject) => {
      this.getBuildList()
      setTimeout(() => {
        resolve();
      }, 500);
    }).then(res => {
      console.log(this.task.twoObj)
      if (this.task.twoObj != null) {
        this.formList = this.task.twoObj
        // 对数据进行回显处理
        // 对于胡俊的代码从element.type = data.value修改为element.type == data.value
        this.formList.forEach(element => {
          if (element.type) {
            this.placeType.forEach(data => {
              if (element.type == data.dictLabel) {
                element.showPlace = data.dictLabel
              }
            })
          }
        });
        console.log(this.placeType)
      }
    })

  },
  methods: {
    // 删除
    delImg(index) {
      uni.showModal({
        title: '提示',
        content: '确定要删除该服务对象？',
        cancelText: '取消',
        confirmText: '确认',
        success: res => {
          if (res.confirm) {
            this.formList.splice(index, 1);
          }
        }
      });
    },
    // 校验（label:描述，prop:属性值，length:字符长度,isLength:是否进行字符长度判断）
    labelLength(label, prop, isLength, length) {
      return new Promise((resovle, reject) => {
        if (prop.length == 0) {
          reject(label + '不能为空')

          this.$showToast({
            show: true,
            text: label + '不能为空'
          });
        } else {
          resovle(true)
        }
        // 如果为真进行长度判断
        if (isLength) {
          if (prop.length > length) {
            reject(label + '不能长于' + length + '字符')

            this.$showToast({
              show: true,
              text: label + '不能长于' + length + '字符'
            });
          } else {
            resovle(true)
          }
        }
      })
    },
    // 建筑物(场所)类别change
    placeTypeChange(e, key) {
      this.formList[key].type = this.placeType[e.detail.value].dictValue
      this.formList[key].showPlace = this.placeType[e.detail.value].dictLabel
    },
    // 最高火灾危险性chang
    dangerTypeChange(e, key) {
      this.formList[key].maxFireRisk = this.dangerType[e.detail.value].value
    },
    // 新增租赁场地信息
    changeAdd() {
      let newList = this.deepClone(this.valiFormData)
      this.formList.push(newList)
    },
    // 返回
    back() {
      this.$emit('changeNext', 0)
    },
    next() {
      // 校验是否通过
      let result = true
      let newArray = this.deepClone(this.formList)
      // 判断服务对象不能为空
      if (this.formList.length === 0) {
        result = false
        this.$showToast({
          show: true,
          text: '服务对象不能为空！'
        })
      } else {
        result = true
      }
      // 此操作确保提交时的场所类别为代码，不为中文
      newArray.forEach(item => {
        this.placeType.forEach(element => {
          if (item.type == element.dictLabel) {
            item.type = element.dictValue
          }
        })
      })
      if (result) {
        this.$store.commit('stroeTwo', newArray)
        this.$emit("changeNext", 2)
      } else {
        this.$showToast({
          show: true,
          text: '信息未填写完整，请完善后再保存！'
        })
      }
    },
    // 获取建筑物场所类别
    getBuildList() {
      this.$getDict('build_type').then(res => {
        this.placeType = res
      })
    },



    // 深拷贝
    deepClone(target) {
      // 定义一个变量
      let result;
      if (typeof target === "object") {
        // 如果当前需要深拷贝的是一个对象的话
        if (Array.isArray(target)) {
          // 如果是一个数组的话
          result = [];
          for (let i in target) {
            // 递归克隆数组中的每一项
            result.push(this.deepClone(target[i]));
          }
        } else if (target === null) {
          // 判断如果当前的值是null的话；直接赋值为null
          result = null;
        } else if (target.constructor === RegExp) {
          // 判断如果当前的值是一个RegExp对象的话，直接赋值
          result = target;
        } else {
          // 否则是普通对象，直接for in循环，递归赋值对象的所有值
          result = {};
          for (let i in target) {
            result[i] = this.deepClone(target[i]);
          }
        }
      } else {
        // 如果不是对象的话，就是基本数据类型，那么直接赋值
        result = target;
      }
      // 返回最终结果
      return result;
    },
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";

.formItem {
  display: flex;
  align-items: center;
  height: 110rpx;
  width: 710rpx;
  margin: 0 auto 12rpx;
  background-color: #fff;
  padding: 0 22rpx;
  border-radius: 20rpx;

  .label {
    color: #333;
    font-size: 28rpx;
    font-weight: 400;
    line-height: 36rpx;
    width: 45%;
  }

  .content {
    flex: 1;
    text-align: right;
  }
}

.step_box {
  padding-bottom: 100rpx;
  position: relative;

  &-btn {
    position: fixed;
    bottom: 0;
    height: 80rpx;
    background: #f4f5f5;
    width: 100%;
    line-height: 80rpx;
    display: flex;
    flex-direction: row;
    border-top: 1rpx solid #e5e5e5;

    .flexwork {
      flex: 1;
      text-align: center;
      font-size: 30rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #333333;
    }

    .flexwork:first-child {
      background: $OVERALL_CLOSE_BUTTON_COLOR;
      color: $OVERALL_SITUATION_BACKGROUND;
    }

    .flexwork:last-child {
      background: $OVERALL_CONFIRM_BUTTON_COLOR;
      color: #ffffff;
    }
  }

  .close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 32rpx;
    right: 30rpx
  }
}

/deep/.is-input-border {
  border: none;
}

/deep/.text-right {
  line-height: 72rpx !important;
}

.step_box_add {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  flex-direction: row;
  margin-top: 24rpx;

  &-img {
    width: 20rpx;
    height: 20rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }

  &-span {
    font-size: 30rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #335ac6;
    margin-left: 17rpx;
  }
}

.required {
  &::after {
    content: "*";
    margin: 0 10rpx;
    color: #ea0707;
  }
}
</style>
